<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form :inline="true">
          <el-form-item>
            <el-button
              icon="el-icon-plus"
              type="primary"
              @click="showInsert"
            >{{ $t('insert') }}
            </el-button>
          </el-form-item>
        </el-form>
        <div
          v-for="(item,index) in groupList"
          :key="index"
          style="width: 100%"
        >
          <div
            :class="[item.groupId === group.groupId ? 'well':'','item']"
            style="display: flex;justify-content: space-between;line-height: 40px;padding: 0 10px"
            @click.stop="groupClick(item)"
          >
            <div>{{ item.name }}</div>
            <div>
              <el-button
                type="text"
                icon="el-icon-edit"
                @click="edit(item)"
              >{{ $t('edit') }}
              </el-button>
              <el-button
                type="text"
                style="color: #f56c6c"
                icon="el-icon-delete"
                :disabled="item.userId != userId"
                @click="del(item)"
              >{{ $t('delete') }}
              </el-button>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="18" style="margin-top: 30px">
        <div style="line-height: 20px">
          <span>{{ group.name }}</span>
        </div>
        <el-row :gutter="5">
          <el-col v-for="(item,index) in componentList" :key="index" :span="6">
            <div
              style="position:relative;display: flex;justify-content: center;align-items: center;height: 150px;border-width: 1px;border-style: dashed;border-radius: 12px;border-color: #b6c5c6;margin-bottom: 5px"
            >
              <el-button
                style="position: absolute;right: 5px;top: 5px"
                icon="el-icon-delete"
                type="danger"
                :disabled="item.userId != userId"
                @click="delComponent(item)"
              />
              <!--svg-->
              <template v-if="item.type === 'svg'">
                <div class="item-icon">
                  <embed
                    class="icon iconfont"
                    :src="item.url"
                    width="50px"
                    height="50px"
                    style="pointer-events: none"
                    type="image/svg+xml"
                    pluginspage="http://www.adobe.com/svg/viewer/install/"
                  >
                </div>
                <div style="margin-top: 10px">{{ item.name }}</div>
              </template>
              <template v-else>
                <div class="toolbox-item-icon">
                  <img
                    :src="item.url"
                    style="width: 50px;height: 50px;"
                  >
                </div>
                <div style="margin-top: 10px">{{ item.name }}</div>
              </template>
            </div>
          </el-col>
          <el-col :span="6">
            <div
              style="display: flex;justify-content: center;align-items: center;height: 150px;border-width: 1px;border-style: dashed;border-radius: 12px;border-color: #b6c5c6;margin-bottom: 5px"
            >
              <div>
                <el-button
                  type="primary"
                  circle
                  icon="el-icon-plus"
                  @click="showInsertComponent"
                />
                <div style="margin-top: 10px">{{ $t('insert') }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-dialog

      :visible.sync="dialogGroupVisible"
      top="15px"
    >
      <el-form
        label-width="20%"
        :model="group"
      >
        <el-form-item :label="$t('name')">
          <el-input v-model="group.name" />
        </el-form-item>
        <el-form-item :label="$t('keyName')">
          <el-input v-model="group.keyName" :disabled="model !== 'insert'" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogGroupVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="addOrUpdate">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogComponentFormVisible"
      width="500px"
    >
      <el-form
        label-width="50px"
      >
        <el-form-item :label="$t('name')">
          <el-input v-model="component.companyName" />
        </el-form-item>
        <el-form-item :label="$t('file')">
          <el-upload
            ref="upload"
            :headers="headers"
            drag
            name="file"
            :action="baseURL+'/device/view/component/insert'"
            :auto-upload="false"
            :on-success="handleSuccess"
            :on-error="handleError"
            :data="component"
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogComponentFormVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="submitUploadComponent">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {
  formatDate,
  successNotice,
  cancelNotice
} from '@/util/common'
import {
  listDeviceViewComponentGroup,
  updateDeviceViewComponentGroup,
  deleteDeviceViewComponentGroup,
  insertDeviceViewComponentGroup
} from '@/api/iot/iotDeviceViewComponentGroupApi'
import {
  listDeviceViewComponent,
  deleteDeviceViewComponent
} from '@/api/iot/iotDeviceViewComponentApi'
import {
  getToken,
  getUserId
} from '@/util/storage'

export default {
  name: 'ComponentManage',
  data() {
    return {
      userId: getUserId(),
      baseURL: window.VUE_APP_BASE_API,
      componentList: [],
      groupList: [],
      group: {},

      component: null,
      dialogGroupVisible: false,
      dialogComponentFormVisible: false,
      headers: {
        'access-token': getToken()
      }
    }
  }, created() {
    this.listDeviceViewComponentGroup()
  },
  methods: {
    delComponent(index) {
      const that = this
      this.$confirm(that.$t('delete') + index.name, that.$t('prompt'), {
        confirmButtonText: that.$t('confirm'),
        cancelButtonText: that.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteDeviceViewComponent({
            componentId: index.componentId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
              that.listDeviceViewComponent()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    groupClick(item) {
      this.group = item
      this.listDeviceViewComponent()
    },
    submitUploadComponent() {
      const that = this
      this.component = JSON.parse(JSON.stringify(this.component))
      // return
      setTimeout(() => {
        that.$refs.upload.submit()
      }, 1000)
    },
    handleSuccess(res, file, fileList) {
      successNotice(this)
      this.dialogFormVisible = false
      this.listDeviceViewComponent()
    },
    handleError(err, file, fileList) {
      this.listDeviceViewComponent()
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    showInsert() {
      this.group = {}
      this.dialogGroupVisible = true
    },
    listDeviceViewComponentGroup() {
      this.componentList = []
      this.component = {}
      const that = this
      listDeviceViewComponentGroup({}).then(res => {
        const { code, data } = res
        if (code === '200') {
          that.groupList = data
          if (that.groupList.length > 0) {
            that.group = data[0]
            this.listDeviceViewComponent()
          }
        } else {
          that.groupList = []
        }
      })
    },
    listDeviceViewComponent() {
      const that = this
      listDeviceViewComponent({
        groupId: this.group.groupId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          that.componentList = data
        } else {
          that.componentList = []
        }
      })
    },
    addOrUpdate() {
      const that = this
      const json = {
        ...this.group
      }
      if (!this.group.groupId) {
        insertDeviceViewComponentGroup(json).then(res => {
          const { code } = res
          if (code === '200') {
            that.dialogGroupVisible = false
          }
          that.listDeviceViewComponentGroup()
        })
      } else {
        updateDeviceViewComponentGroup(json).then(res => {
          const { code } = res
          if (code === '200') {
            that.dialogGroupVisible = false
          }
          that.listDeviceViewComponentGroup()
        })
      }
    },
    edit(item) {
      this.group = item
      this.dialogGroupVisible = true
    },
    showInsertComponent() {
      this.component = {
        groupId: this.group.groupId
      }
      this.dialogComponentFormVisible = true
    },
    del(item) {
      const that = this
      this.$confirm(that.$t('delete') + item.name, that.$t('prompt'), {
        confirmButtonText: that.$t('confirm'),
        cancelButtonText: that.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteDeviceViewComponentGroup({
            groupId: item.groupId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
              that.listDeviceViewComponentGroup()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    }
  }
}
</script>

<style scoped>

  .well {
    background-color: $ --color-primary;
    border-radius: 6px;
  }

  .item:hover {
    background: #EBEEF5;
    border-radius: 6px;
  }
</style>
